<template>
    <div ref="statisticsRef" class="">
        <div class="flex gap-16px mg-t-16">
            <insureData class="flex-1" title="保险数据" select-oneline :list="Object.values(listInsure)" show-company
                show-plan v-model:date-value="dateList" v-model:select-insure-company-value="selectInsureCompanyValue"
                v-model:select-type-value="selectTypeValue" v-model:select-plan-value="selectPlanValue" @change="getData"
                :insure-type="insureType" />
            <insureData class="flex-1" title="运营数据" select-oneline :list="Object.values(listOperate)" :show-company="false"
                :show-plan="false" v-model:date-value="dateList1" v-model:select-insure-company-value="selectInsureCompanyValue1"
                v-model:select-type-value="selectTypeValue1" v-model:select-plan-value="selectPlanValue1" @change="getData1"
                :insure-type="insureType" />
        </div>
        <div class="flex gap-16px mg-t-16">
            <chartPlans class="flex-1 h-300" title="方案统计" :insure-type="insureType" :query-data="queryData"/>
            <signTrendData title="近七日投保数据" class="flex-1 h-300" :insure-type="insureType" :query-data="queryData"/>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import insureData from '@/views/clients/dealClient/components/insureData.vue'
import chartPlans from '@/views/clients/dealClient/components/chartPlans.vue'
import signTrendData from './signTrendData.vue'
import { getWesureData, getWesureOperateData } from '@/api/dashboard/weinsure.ts'

const props = defineProps({
    insureType: {
        type: String,
        default: 'dashboardDay'
    },
    queryData: {
        type: Object,
        default() {
            return {}
        }
    }
})

const chartBarRef = ref(null)
const chartPieRef = ref(null)

const statisticsRef = ref(null)

const dateList = ref([])
const selectInsureCompanyValue = ref('')
const selectTypeValue = ref('')
const selectPlanValue = ref('')

const dateList1 = ref([])
const selectInsureCompanyValue1 = ref('')
const selectTypeValue1 = ref('')
const selectPlanValue1 = ref('')

const listInsure = ref({
    amount: {
        name: '保费',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar1',
        decimal: 2
    },
    policyPeopleCount: {
        name: '投保人数',
        hint: '',
        value: '',
        suffix: '人',
        icon: 'bar4'
    },
    recordCount: {
        name: '报案数',
        value: '',
        suffix: '件',
        icon: 'bar5'
    }
})

const listOperate = ref({
    openCount: {
        name: '开通客户',
        hint: '',
        value: '',
        suffix: '人',
        icon: 'bar1'
    },
    rechargeAmount: {
        name: '充值金额',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar2',
        decimal: 2
    },
    integer: {
        name: '充值客户数',
        hint: '',
        value: '',
        suffix: '人',
        icon: 'bar3'
    },
    rechargeAndUse: {
        name: '使用充值客户数',
        hint: '',
        value: '',
        suffix: '人',
        icon: 'bar4'
    },
})

const resize = () => {
    chartBarRef.value.resize()
    chartPieRef.value.resize()
}


const getData = () => {
    let insureCompanyType = ''
    if (props.insureType === 'dashboardGroup') {
        insureCompanyType = 'insure_type_tyrb'
    }
    getWesureData({
        insurCompany: selectInsureCompanyValue.value,
        insuranceMethod: selectTypeValue.value,
        insurCompanyPlanCode: selectPlanValue.value,
        tyxPlanName: selectPlanValue.value,
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : '',
        insureCompanyType: insureCompanyType,
        ...props.queryData
    }).then(res => {
        for (const key in listInsure.value) {
            listInsure.value[key].value = res[key]
        }
    })
}

const getData1 = () => {
    let insureCompanyType = ''
    if (props.insureType === 'dashboardGroup') {
        insureCompanyType = 'insure_type_tyrb'
    }
    getWesureOperateData({
        insurCompany: selectInsureCompanyValue1.value,
        insuranceMethod: selectTypeValue1.value,
        insurCompanyPlanCode: selectPlanValue1.value,
        startTime: dateList1.value?.length ? dateList1.value[0] : '',
        endTime: dateList1.value?.length ? dateList1.value[1] : '',
        insureCompanyType: insureCompanyType,
        ...props.queryData
    }).then(res => {
        for (const key in listOperate.value) {
            listOperate.value[key].value = res[key]
        }
    })
}

defineExpose({
    statisticsRef,
    resize,
    getData,
    getData1
})
</script>
<style lang="scss" scoped>
.h-300 {
    height: 303px;
}
</style>
